<template>
    <div style="margin-top: 100px;"></div>
    <a-tree-select
      v-model:value="selectedValues"
      style="width: 100%"
      :tree-data="processedTreeData"
      :render-value="renderSelectedItems"
      :tree-node-label-prop="'title'"
      placeholder="请选择节点"
      multiple
      show-search
      allow-clear
      tree-default-expand-all
      dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    />
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 原始树形数据
  const rawTreeData = [
    {
      title: '电子产品',
      value: 'electronics',
      key: 'electronics',
      children: [
        {
          title: '手机',
          value: 'phone',
          key: 'phone',
          children: [
            { title: '智能手机', value: 'smartphone', key: 'smartphone' },
            { title: '功能机', value: 'featurephone', key: 'featurephone' }
          ]
        },
        {
          title: '电脑',
          value: 'computer',
          key: 'computer',
          children: [
            { title: '笔记本', value: 'laptop', key: 'laptop' },
            { title: '台式机', value: 'desktop', key: 'desktop' }
          ]
        }
      ]
    },
    {
      title: '家用电器',
      value: 'appliances',
      key: 'appliances',
      children: [
        { title: '冰箱', value: 'fridge', key: 'fridge' },
        { title: '洗衣机', value: 'washer', key: 'washer' }
      ]
    }
  ];
  
  // 处理树形数据，添加完整路径信息
  const processTreeData = (nodes, parentPath = []) => {
    return nodes.map(node => {
      // 构建当前节点的完整路径
      const currentPath = [...parentPath, node.title];
      
      // 创建新节点，添加完整路径属性
      const newNode = {
        ...node,
        fullPath: currentPath,
        fullPathText: currentPath.join(' / ') // 用斜杠分隔的完整路径文本
      };
      
      // 递归处理子节点
      if (node.children && node.children.length) {
        newNode.children = processTreeData(node.children, currentPath);
      }
      
      return newNode;
    });
  };
  
  // 处理后的树形数据
  const processedTreeData = processTreeData(rawTreeData);
  
  // 选中的值
  const selectedValues = ref([]);
  
  // 查找节点信息的工具函数
  const findNodeByValue = (nodes, value) => {
    for (const node of nodes) {
      if (node.value === value) {
        return node;
      }
      if (node.children && node.children.length) {
        const found = findNodeByValue(node.children, value);
        if (found) return found;
      }
    }
    return null;
  };
  
  // 自定义选中值的展示方式
  const renderSelectedItems = (valueList) => {
    if (!valueList.length) return null;
    
    return valueList.map(value => {
      const node = findNodeByValue(processedTreeData, value);
      return node ? node.fullPathText : null;
    });
  };
  </script>
  
  <style scoped>
  /* 可根据需要添加自定义样式 */
  .ant-select-selection-item {
    margin: 2px 4px !important;
  }
  </style>
      